<template>
    <q-page class="q-pa-md">
      <!-- 顶部导航栏 -->
      <q-header class="bg-white text-black">
        <q-toolbar>
          <q-btn 
            flat 
            round 
            dense 
            icon="arrow_back" 
            @click="goBack"
          />
          <q-toolbar-title>商品详情</q-toolbar-title>
          <q-btn 
            flat 
            round 
            dense 
            icon="share"
            @click="shareProduct"
          />
        </q-toolbar>
      </q-header>
  
      <!-- 商品详情内容 -->
      <div v-if="product" class="q-pt-md">
        <!-- 商品图片 -->
        <div class="q-mb-md">
          <q-img
            :src="product.image || 'https://via.placeholder.com/400x300'"
            :ratio="4/3"
            class="rounded-borders"
          />
        </div>
  
        <!-- 商品信息 -->
        <div class="q-mb-md">
          <div class="text-h5 q-mb-sm">{{ product.name }}</div>
          <div class="text-h6 text-primary q-mb-sm">￥{{ product.price }}</div>
          <div class="text-body2 text-grey-7">
            {{ product.description }}
          </div>
        </div>
  
        <!-- 商品参数 -->
        <q-card class="q-mb-md">
          <q-card-section>
            <div class="text-subtitle1 q-mb-sm">商品参数</div>
            <div v-for="(value, key) in product.specs" :key="key" class="row q-mb-xs">
              <div class="col-3 text-grey-7">{{ key }}:</div>
              <div class="col">{{ value }}</div>
            </div>
          </q-card-section>
        </q-card>
  
        <!-- 其他商品推荐 -->
        <div class="q-mb-md">
          <div class="text-subtitle1 q-mb-sm">相关商品</div>
          <div class="row q-gutter-sm">
            <q-card 
              v-for="item in relatedProducts" 
              :key="item.id"
              class="col cursor-pointer"
              @click="goToProduct(item.id)"
            >
              <q-card-section class="q-pa-sm">
                <div class="text-caption">{{ item.name }}</div>
                <div class="text-caption text-primary">￥{{ item.price }}</div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
  
      <!-- 加载状态 -->
      <div v-else class="text-center q-mt-xl">
        <q-spinner-dots size="50px" color="primary" />
        <div class="q-mt-md">加载中...</div>
      </div>
  
      <!-- 底部操作栏 -->
      <q-footer class="bg-white">
        <q-toolbar class="text-black">
          <q-btn 
            flat 
            icon="favorite_border" 
            label="收藏"
            @click="toggleFavorite"
          />
          <q-space />
          <q-btn 
            color="orange" 
            label="加入购物车"
            @click="addToCart"
            class="q-mr-sm"
          />
          <q-btn 
            color="primary" 
            label="立即购买"
            @click="buyNow"
          />
        </q-toolbar>
      </q-footer>
    </q-page>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useQuasar } from 'quasar'
  
  const router = useRouter()
  const route = useRoute()
  const $q = useQuasar()
  
  // 商品数据
  const product = ref(null)
  const relatedProducts = ref([])
  
  // 获取商品详情
  const fetchProductDetail = async () => {
    const productId = route.params.id
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 800))
    
    // 模拟商品数据
    product.value = {
      id: productId,
      name: `商品${productId}`,
      price: parseInt(productId) * 100 - 1,
      description: '这是一个非常优质的商品，具有很多优秀的特性和功能。适合各种场景使用，性价比很高。',
      image: `https://via.placeholder.com/400x300?text=Product${productId}`,
      specs: {
        '品牌': '优质品牌',
        '型号': `Model-${productId}`,
        '颜色': '经典色',
        '尺寸': '标准尺寸',
        '重量': '轻便'
      }
    }
    
    // 模拟相关商品
    relatedProducts.value = [
      { id: parseInt(productId) + 1, name: `相关商品1`, price: 88 },
      { id: parseInt(productId) + 2, name: `相关商品2`, price: 168 },
      { id: parseInt(productId) + 3, name: `相关商品3`, price: 258 }
    ]
  }
  
  // 返回上一页
  const goBack = () => {
    router.go(-1)
  }
  
  // 跳转到其他商品
  const goToProduct = (productId) => {
    router.push(`/product/${productId}`)
  }
  
  // 分享商品
  const shareProduct = () => {
    $q.notify({
      type: 'positive',
      message: '分享功能待实现'
    })
  }
  
  // 收藏商品
  const toggleFavorite = () => {
    $q.notify({
      type: 'positive',
      message: '已添加到收藏'
    })
  }
  
  // 加入购物车
  const addToCart = () => {
    $q.notify({
      type: 'positive',
      message: '已添加到购物车'
    })
  }
  
  // 立即购买
  const buyNow = () => {
    $q.notify({
      type: 'positive',
      message: '跳转到结算页面'
    })
  }
  
  // 页面加载
  onMounted(() => {
    console.log('商品详情页加载:', route.params.id)
    fetchProductDetail()
  })
  </script>
  
  <style scoped>
  .q-footer {
    border-top: 1px solid #e0e0e0;
  }
  </style>